<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--                                                               -->
		<!-- Consider inlining CSS to reduce the number of requested files -->
		<!--                                                               -->
		<link type="text/css" rel="stylesheet" href="Dashboard.css">
	
		<!--                                           -->
		<!-- Any title is fine                         -->
		<!--                                           -->
		<title>Wrapper HTML for Dashboard</title>		
		
		
		<style type="text/css">
	        #loading {
	            position: absolute;
	            left: 45%;
	            top: 40%;
	            padding: 2px;
	            z-index: 20001;
	            height: auto;
	            border: 1px solid #ccc;
	        }
	        #loading a {
	            color: #225588;
	        }
	
	        #loading .loading-indicator {
	            background: white;
	            color: #444;
	            font: bold 13px tahoma, arial, helvetica;
	            padding: 10px;
	            margin: 0;
	            height: auto;
	        }
	
	        #loading-msg {
	            font: normal 10px arial, tahoma, sans-serif;
	        }
    	</style>
	</head>

	<!--                                           -->
	<!-- The body can have arbitrary html, or      -->
	<!-- we leave the body empty because we want   -->
	<!-- to create a completely dynamic ui         -->
	<!--                                           -->
	<body>

		<!-- OPTIONAL: include this if you want history support -->
		<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
		
		<!--add loading indicator while the app is being loaded-->
		<div id="loading">
		    <div class="loading-indicator">
		        <img src="dashboard/js/ext/resources/images/default/shared/large-loading.gif" width="32" height="32"
		             style="margin-right:8px;float:left;vertical-align:top;"/>GWT-Ext<br/>
		        <span id="loading-msg">Loading styles and images...</span></div>
		</div>
		
		<!--include the Ext CSS, and use the gray theme-->
		<link rel="stylesheet" type="text/css" href="dashboard/js/ext/resources/css/ext-all.css"/>

		<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
		
		<!--include the Ext Core API-->
		<script language="javascript" src="dashboard/js/ext/adapter/ext/ext-base.js"></script>
		
		<!--include Ext -->
		<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
		<script language="javascript" src="dashboard/js/ext/ext-all.js"></script>
		
		<!--include the application JS-->
		<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
		<script language="javascript" src="dashboard/dashboard.nocache.js"></script>
		
		<!--hide loading message-->
		<script type="text/javascript">Ext.get('loading').fadeOut({remove: true, duration:.25});</script>

	</body>
</html>
